<!DOCTYPE html><html class="theme-next gemini use-motion" lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="theme-color" content="#222"><script src="/MyBlog/lib/pace/pace.min.js?v=1.0.2"></script><link href="/MyBlog/lib/pace/pace-theme-loading-bar.min.css?v=1.0.2" rel="stylesheet"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/MyBlog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/MyBlog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/MyBlog/css/main.css?v=5.1.4" rel="stylesheet" type="text/css"><link rel="apple-touch-icon" sizes="180x180" href="/MyBlog/images/apple-touch-icon-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="32x32" href="/MyBlog/images/bitbug_favicon.ico?v=5.1.4"><link rel="icon" type="image/png" sizes="16x16" href="/MyBlog/images/bitbug_favicon16.ico?v=5.1.4"><link rel="mask-icon" href="/MyBlog/images/logo.svg?v=5.1.4" color="#222"><meta name="keywords" content="Hexo, NexT"><meta property="og:type" content="website"><meta property="og:title" content="Yang&#39;s Blog"><meta property="og:url" content="https://gitee.com/yang_yu_xiang/MyBlog/page/3/index.html"><meta property="og:site_name" content="Yang&#39;s Blog"><meta property="article:author" content="杨雨翔"><meta name="twitter:card" content="summary"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/MyBlog/",scheme:"Gemini",version:"5.1.4",sidebar:{position:"left",display:"post",offset:12,b2t:!1,scrollpercent:!0,onmobile:!0},fancybox:!0,tabs:!0,motion:{enable:!0,async:!1,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideUpIn"}},duoshuo:{userId:"0",author:"博主"},algolia:{applicationID:"",apiKey:"",indexName:"",hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}}}</script><link rel="canonical" href="https://gitee.com/yang_yu_xiang/MyBlog/page/3/"><title>Yang's Blog</title><meta name="generator" content="Hexo 4.2.1"></head><body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans"><div class="container sidebar-position-left page-home"><div class="headband"></div><a href="https://gitee.com/yang_yu_xiang" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/MyBlog/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">Yang's Blog</span> <span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle">永远年轻 永远热泪盈眶</p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/MyBlog/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-tags"><a href="/MyBlog/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>标签</a></li><li class="menu-item menu-item-categories"><a href="/MyBlog/categories/" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分类</a></li><li class="menu-item menu-item-archives"><a href="/MyBlog/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>搜索</a></li></ul><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"><span class="search-icon"><i class="fa fa-search"></i> </span><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span><div class="local-search-input-wrapper"><input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"></div></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><section id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/08/16/%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/08/16/%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D/" itemprop="url">浅拷贝和深拷贝</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-08-16T15:30:43+08:00">2020-08-16 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-08-16T17:15:23+08:00">2020-08-16 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/08/16/%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/08/16/%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">504 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">2</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h1><ul><li><strong>浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用。</strong></li></ul><p>来看个例子：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//我们有个Object对象，我想把这个对象拷贝给另一个对象</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    id: <span class="number">1</span>,</span><br><span class="line">    name: <span class="string">'andy'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> o = &#123;&#125;;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> k <span class="keyword">in</span> obj)&#123;</span><br><span class="line">    <span class="comment">//k是属性名   obj[k]是属性值</span></span><br><span class="line">    o[k]= obj[k];</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(o);</span><br></pre></td></tr></table></figure><p>这样就输出了obj中的值，但是如果我们有更深的一层数据：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    id: <span class="number">1</span>,</span><br><span class="line">    name: <span class="string">'andy'</span></span><br><span class="line">    <span class="comment">//对象里面还有个对象</span></span><br><span class="line">    msg:&#123;</span><br><span class="line">        age:<span class="number">18</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> o = &#123;&#125;;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> k <span class="keyword">in</span> obj)&#123;</span><br><span class="line">    <span class="comment">//k是属性名   obj[k]是属性值</span></span><br><span class="line">    o[k]= obj[k];</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(o);</span><br></pre></td></tr></table></figure><p>这样拷贝虽然能拷贝成功输出msg，但是拷贝的是msg的地址。所以obj的msg和o的msg指向的是同一条数据，做个测试</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">o.msg.age = <span class="number">20</span></span><br><span class="line"><span class="built_in">console</span>.log(o.msg.age)<span class="comment">//20</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.msg.age)<span class="comment">//20</span></span><br></pre></td></tr></table></figure><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/08/16/%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/08/15/Vuex/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/08/15/Vuex/" itemprop="url">Vuex</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-08-15T15:05:46+08:00">2020-08-15 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-11-02T17:35:29+08:00">2020-11-02 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/Vue/Vuex/" itemprop="url" rel="index"><span itemprop="name">Vuex</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/08/15/Vuex/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/08/15/Vuex/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">2.4k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">9</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="Vuex"><a href="#Vuex" class="headerlink" title="Vuex"></a>Vuex</h1><p>官方解释:<code>Vuex是一个专为Vuejs应用程序开发的状态管理模式。</code></p><p>它采用<strong>集中式存储管理</strong>应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</p><p><strong>状态管理到底是什么?</strong></p><ul><li>状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。</li><li>其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。</li><li>然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。</li><li>那么，多个组件就可以共享这个对象中的所有变量属性了</li></ul><p><strong>等等，如果是这样的话，为什么官方还要专门出一个插件Vuex呢?难道我们不能自己封装一个对象来管理吗?</strong><br>比如说我们定义一个<code>shareObj</code>对象，挂载到Vue的原型上</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> shareObj = &#123;</span><br><span class="line">    name:<span class="string">'yang'</span></span><br><span class="line">&#125;</span><br><span class="line">Vue.prototype.shareObj = shareObj</span><br></pre></td></tr></table></figure><p>当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢?没错，就是响应式。如果这么做了，我们更新<code>shareObj</code>中的值，<strong>没办法触发</strong>页面中的值刷新。因为他没被加到Vue的响应式系统里，而data中的数据被加载到了响应式系统里，所以能触发刷新。</p><h2 id="管理什么状态"><a href="#管理什么状态" class="headerlink" title="管理什么状态"></a>管理什么状态</h2><p>有什么状态时需要我们在多个组件间共享的呢?<br>&emsp;&emsp;如果你做过大型开发，你一定遇到过多个状态，在多个界面间的共享问题。比如<strong>用户的登录状态、用户名称、头像、地理位置信息</strong>等等。比如<strong>商品的收藏、购物车中的物品</strong>等等。<br>&emsp;&emsp;这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的</p><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/08/15/Vuex/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/08/12/Vue%E7%9A%84%E7%9B%91%E5%90%AC%E5%99%A8%E5%92%8C%E8%BF%87%E6%BB%A4%E5%99%A8/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/08/12/Vue%E7%9A%84%E7%9B%91%E5%90%AC%E5%99%A8%E5%92%8C%E8%BF%87%E6%BB%A4%E5%99%A8/" itemprop="url">Vue的监听器和过滤器</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-08-12T17:09:54+08:00">2020-08-12 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-08-13T17:41:48+08:00">2020-08-13 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/08/12/Vue%E7%9A%84%E7%9B%91%E5%90%AC%E5%99%A8%E5%92%8C%E8%BF%87%E6%BB%A4%E5%99%A8/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/08/12/Vue%E7%9A%84%E7%9B%91%E5%90%AC%E5%99%A8%E5%92%8C%E8%BF%87%E6%BB%A4%E5%99%A8/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">847 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">3</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="监听器"><a href="#监听器" class="headerlink" title="监听器"></a>监听器</h1><p>监听器可以监听数据的变化，当某个数据改变时，可以触发某个函数</p><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/%E7%9B%91%E5%90%AC%E5%99%A8.png" alt=""></p><p>来看看监听器的简单用法</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义数据  在html中用v-model绑定   </span></span><br><span class="line">data&#123;</span><br><span class="line">    firstName:<span class="string">'xxx'</span></span><br><span class="line">    lastName:<span class="string">'yyy'</span></span><br><span class="line">    fullName:<span class="string">''</span></span><br><span class="line">&#125;</span><br><span class="line">watch: &#123;</span><br><span class="line">    <span class="comment">//监听firstname变化</span></span><br><span class="line">    firstName: <span class="function"><span class="keyword">function</span> (<span class="params">val</span>) </span>&#123;</span><br><span class="line">        <span class="comment">// val表示变化之后的值</span></span><br><span class="line">        <span class="keyword">this</span>.fullName = val + <span class="keyword">this</span>.lastName ;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">//监听lastname变化</span></span><br><span class="line">    lastName: <span class="function"><span class="keyword">function</span> (<span class="params">val</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.fullName = <span class="keyword">this</span>.firstName + val;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/08/12/Vue%E7%9A%84%E7%9B%91%E5%90%AC%E5%99%A8%E5%92%8C%E8%BF%87%E6%BB%A4%E5%99%A8/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/08/11/axios/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/08/11/axios/" itemprop="url">axios</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-08-11T16:53:41+08:00">2020-08-11 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-11-11T10:49:09+08:00">2020-11-11 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/08/11/axios/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/08/11/axios/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">1k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">4</span></div></div></header><div class="post-body" itemprop="articleBody"><p>axios(官网: <a href="https://github.com/axios/axios" target="_blank" rel="noopener">https://github.com/axios/axios</a> )是一个基于Promise用于浏览器和node.js的HTTP客户端。<br>它具有以下特征:</p><ul><li>支持浏览器和node.js心</li><li>支持promise</li><li>能拦截请求和响应</li><li>自动转换JSON数据</li></ul><h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><blockquote><p>npm install axios -S</p></blockquote><h1 id="在main-js中导入"><a href="#在main-js中导入" class="headerlink" title="在main.js中导入"></a>在main.js中导入</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span></span><br><span class="line">Vue.prototype.$axios = axios    <span class="comment">//全局注册，使用方法为:this.$axios</span></span><br><span class="line">Vue.prototype.qs = qs           <span class="comment">//全局注册，使用方法为:this.qs</span></span><br></pre></td></tr></table></figure><h1 id="axios的基本用法"><a href="#axios的基本用法" class="headerlink" title="axios的基本用法"></a>axios的基本用法</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">axios.get(<span class="string">'/data'</span>)</span><br><span class="line">    .then (<span class="function"><span class="params">res</span>=&gt;</span>&#123;</span><br><span class="line"><span class="comment">// data属性名称是固定的，用于获取后台响应的数据</span></span><br><span class="line">        <span class="built_in">console</span>.log(res.data)</span><br><span class="line">    &#125;)</span><br></pre></td></tr></table></figure><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/08/11/axios/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/07/30/Vue%E8%84%9A%E6%89%8B%E6%9E%B6/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/07/30/Vue%E8%84%9A%E6%89%8B%E6%9E%B6/" itemprop="url">Vue脚手架</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-07-30T21:35:57+08:00">2020-07-30 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-11-05T10:47:12+08:00">2020-11-05 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/07/30/Vue%E8%84%9A%E6%89%8B%E6%9E%B6/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/07/30/Vue%E8%84%9A%E6%89%8B%E6%9E%B6/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">301 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">1</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="VueCLI"><a href="#VueCLI" class="headerlink" title="VueCLI"></a>VueCLI</h1><p>CLI是什么意思?</p><p>&emsp;&emsp;CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架.Vue CLI是一个官方发布vue.js项目脚手架<br>&emsp;&emsp;使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置.</p><p><strong>！VueCLI使用前必须安装node环境和webpack</strong></p><h2 id="node安装"><a href="#node安装" class="headerlink" title="node安装"></a>node安装</h2><p>可以直接在官方网站中下载安装。网址: <a href="http://nodejs.cn/download/" target="_blank" rel="noopener">http://nodejs.cn/download/</a></p><h2 id="webpack安装"><a href="#webpack安装" class="headerlink" title="webpack安装"></a>webpack安装</h2><blockquote><p>npm install webpack -g</p></blockquote><h2 id="VueCLI的安装"><a href="#VueCLI的安装" class="headerlink" title="VueCLI的安装"></a>VueCLI的安装</h2><p>安装vue脚手架：(全局安装)</p><blockquote><p>npm install -g @vue/cli</p></blockquote><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/07/30/Vue%E8%84%9A%E6%89%8B%E6%9E%B6/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%BA%8C%EF%BC%89/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%BA%8C%EF%BC%89/" itemprop="url">Webpack（二）plugin mode</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-07-30T20:44:20+08:00">2020-07-30 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-26T15:02:13+08:00">2020-10-26 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%BA%8C%EF%BC%89/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%BA%8C%EF%BC%89/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">1.3k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">5</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="plugin"><a href="#plugin" class="headerlink" title="plugin"></a>plugin</h1><h2 id="plugin是什么"><a href="#plugin是什么" class="headerlink" title="plugin是什么?"></a>plugin是什么?</h2><p>plugin是插件的意思，通常是用于对某个现有的架构进行扩展。</p><h2 id="loader和plugin区别"><a href="#loader和plugin区别" class="headerlink" title="loader和plugin区别"></a>loader和plugin区别</h2><ul><li>loader主要用于转换某些类型的模块，它是一个转换器。</li><li>plugin是插件，它是对webpack本身的扩展，是一个扩展器。</li></ul><h2 id="plugin的使用过程∶"><a href="#plugin的使用过程∶" class="headerlink" title="plugin的使用过程∶"></a>plugin的使用过程∶</h2><ul><li>步骤一∶通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)</li><li>步骤二︰在webpack.config.js中的plugins中配置插件。webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。</li></ul><p>&emsp;&emsp;我们下面就来看看可以通过哪些插件对现有的webpack打包过程进行扩容，让webpack变得更加好用。</p><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%BA%8C%EF%BC%89/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%B8%80%EF%BC%89/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%B8%80%EF%BC%89/" itemprop="url">Webpack（一） 基本使用和loader</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-07-30T13:43:28+08:00">2020-07-30 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-27T23:20:06+08:00">2020-10-27 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%B8%80%EF%BC%89/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%B8%80%EF%BC%89/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">3.6k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">14</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="什么是Webpack"><a href="#什么是Webpack" class="headerlink" title="什么是Webpack"></a>什么是Webpack</h1><p>来看看官方的解释：</p><p>&emsp;&emsp;At its core, webpack is a static module bundler for modern JavaScript applications.</p><p>&emsp;&emsp;从本质上来讲，webpack是一个现代的JavgScript应用的静态<strong>模块打包</strong>工具。</p><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/webpack.png" alt=""></p><p>&emsp;&emsp;他把所有资源打包压缩成浏览器认识的语法，从而更好的放在服务器上部署，按我的理解就是：大概webpack类似于一个翻译软件，但是它内部是用google翻译（即node）进行翻译的。<br>翻译是为了让我们写的代码能被计算机所识别。</p><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%B8%80%EF%BC%89/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/07/29/%E5%89%8D%E7%AB%AF%E6%A8%A1%E5%9D%97%E5%8C%96%E8%A7%84%E8%8C%83/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/07/29/%E5%89%8D%E7%AB%AF%E6%A8%A1%E5%9D%97%E5%8C%96%E8%A7%84%E8%8C%83/" itemprop="url">前端模块化规范</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-07-29T14:47:35+08:00">2020-07-29 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-07-29T15:57:29+08:00">2020-07-29 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/%E6%A8%A1%E5%9D%97%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">模块化</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/07/29/%E5%89%8D%E7%AB%AF%E6%A8%A1%E5%9D%97%E5%8C%96%E8%A7%84%E8%8C%83/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/07/29/%E5%89%8D%E7%AB%AF%E6%A8%A1%E5%9D%97%E5%8C%96%E8%A7%84%E8%8C%83/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">655 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">2</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="CommonJS模块化规范"><a href="#CommonJS模块化规范" class="headerlink" title="CommonJS模块化规范"></a>CommonJS模块化规范</h1><p>&emsp;&emsp;CommonJS的核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports导出需要暴露的接口。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。</p><h2 id="module-exports和require"><a href="#module-exports和require" class="headerlink" title="module.exports和require"></a>module.exports和require</h2><p>采用 CommonJS 导入及导出的代码如下：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//导入 </span></span><br><span class="line"><span class="keyword">const</span> moduleA = <span class="built_in">require</span> (<span class="string">'./moduleA'</span>); </span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> &#123; test，demo，flag &#125; = <span class="built_in">require</span>(<span class="string">'./moduleA'</span>);</span><br><span class="line"><span class="comment">//等同于</span></span><br><span class="line"><span class="keyword">let</span> _mA = <span class="built_in">require</span>(<span class="string">' moduleA '</span>);</span><br><span class="line"><span class="keyword">let</span> test = _mA.test;</span><br><span class="line"><span class="keyword">let</span> demo = _mA.demo;</span><br><span class="line"><span class="keyword">let</span> flag = _mA.f1ag;</span><br><span class="line"></span><br><span class="line"><span class="comment">//导出  </span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    flag: <span class="literal">true</span>,</span><br><span class="line">    test(a,b)&#123;</span><br><span class="line">        <span class="keyword">return</span> a + b</span><br><span class="line">    &#125;，</span><br><span class="line">    demo(a,b)&#123;</span><br><span class="line">        <span class="keyword">return</span> a * b</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/07/29/%E5%89%8D%E7%AB%AF%E6%A8%A1%E5%9D%97%E5%8C%96%E8%A7%84%E8%8C%83/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/07/28/Vue%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82param%E4%B8%8Equery%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F%E7%9A%84%E5%8C%BA%E5%88%AB/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/07/28/Vue%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82param%E4%B8%8Equery%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F%E7%9A%84%E5%8C%BA%E5%88%AB/" itemprop="url">Vue路由传参param与query两种方式的区别</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-07-28T22:08:58+08:00">2020-07-28 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-11-19T13:38:53+08:00">2020-11-19 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/07/28/Vue%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82param%E4%B8%8Equery%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F%E7%9A%84%E5%8C%BA%E5%88%AB/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/07/28/Vue%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82param%E4%B8%8Equery%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F%E7%9A%84%E5%8C%BA%E5%88%AB/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">510 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">2</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="基本说明"><a href="#基本说明" class="headerlink" title="基本说明"></a>基本说明</h1><p><code>query</code>传参是针对<code>path</code>的，<code>params</code>传参是针对<code>name</code>的。接收参数的方式都差不多，通过<code>this.$route.query</code>和<code>this.$route.params</code></p><p>路由配置：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="attr">path</span>:<span class="string">'/login'</span>,<span class="attr">name</span>:<span class="string">'Login'</span>,<span class="attr">component</span>:Login&#125;,</span><br></pre></td></tr></table></figure><p>1.页面携带query参数跳转(path,name指定跳转到Login时都可以携带query参数)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$router.push(&#123; <span class="attr">path</span>:<span class="string">'/login'</span>,<span class="attr">name</span>:<span class="string">'Login'</span>, <span class="attr">query</span>: &#123; <span class="attr">id</span>: <span class="keyword">this</span>.id &#125; )</span><br></pre></td></tr></table></figure><p>query相当与发送了一次get请求，请求参数会显示在浏览器地址栏中</p><p>2.页面携带params参数跳转(携带params参数跳转时只能使用name指定)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$router.push(&#123; <span class="attr">name</span>:<span class="string">'Login'</span>, <span class="attr">params</span>: &#123; <span class="attr">id</span>: <span class="keyword">this</span>.id &#125; )</span><br></pre></td></tr></table></figure><p>params相当与发送了一次post请求，请求参数则不会显示，并且刷新页面之后参数会消失</p><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/07/28/Vue%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82param%E4%B8%8Equery%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F%E7%9A%84%E5%8C%BA%E5%88%AB/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/07/28/Vue%E4%B8%AD%E7%9A%84%E8%B7%AF%E7%94%B1/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/07/28/Vue%E4%B8%AD%E7%9A%84%E8%B7%AF%E7%94%B1/" itemprop="url">Vue中的路由</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-07-28T16:16:41+08:00">2020-07-28 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-11-19T15:41:11+08:00">2020-11-19 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/07/28/Vue%E4%B8%AD%E7%9A%84%E8%B7%AF%E7%94%B1/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/07/28/Vue%E4%B8%AD%E7%9A%84%E8%B7%AF%E7%94%B1/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">2.7k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">11</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h1><h2 id="后端路由"><a href="#后端路由" class="headerlink" title="后端路由"></a>后端路由</h2><ul><li>概念:根据不同的用户URL请求，返回不同的内容</li><li>本质:URL请求地址与服务器资源之间的对应关系<h2 id="前端路由"><a href="#前端路由" class="headerlink" title="前端路由"></a>前端路由</h2></li><li>概念:根据不同的用户事件，显示不同的页面内容</li><li>本质:用户事件与事件处理函数之间的对应关系</li></ul><h1 id="Vue-Router"><a href="#Vue-Router" class="headerlink" title="Vue Router"></a>Vue Router</h1><p>&emsp;&emsp;vue Router(官网: <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener">https://router.vuejs.org/zh/</a> )是Vue.js官方的路由管理器。</p><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/07/28/Vue%E4%B8%AD%E7%9A%84%E8%B7%AF%E7%94%B1/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article></section><nav class="pagination"><a class="extend prev" rel="prev" href="/MyBlog/page/2/">&lt;</a><a class="page-number" href="/MyBlog/">1</a><a class="page-number" href="/MyBlog/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/MyBlog/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/MyBlog/page/6/">6</a><a class="extend next" rel="next" href="/MyBlog/page/4/">&gt;</a></nav></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div id="sidebar-dimmer"></div><div class="sidebar-inner"><section class="site-overview-wrap sidebar-panel sidebar-panel-active"><div class="site-overview"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="site-author-image" itemprop="image" src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg" alt="杨雨翔"><p class="site-author-name" itemprop="name">杨雨翔</p><p class="site-description motion-element" itemprop="description"></p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/MyBlog/archives/"><span class="site-state-item-count">53</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/MyBlog/categories/index.html"><span class="site-state-item-count">12</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/MyBlog/tags/index.html"><span class="site-state-item-count">32</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://gitee.com/yang_yu_xiang" target="_blank" title="码云"><i class="fa fa-fw fa-git"></i>码云</a> </span><span class="links-of-author-item"><a href="http://wpa.qq.com/msgrd?v=3&uin=1372201820&site=qq&menu=yes" target="_blank" title="QQ"><i class="fa fa-fw fa-qq"></i>QQ</a> </span><span class="links-of-author-item"><a href="https://github.com/gezhicui" target="_blank" title="Github"><i class="fa fa-fw fa-github"></i>Github</a> </span><span class="links-of-author-item"><a href="mailto:1372201820@qq.com" target="_blank" title="E-Mail"><i class="fa fa-fw fa-envelope"></i>E-Mail</a></span></div><div class="links-of-blogroll motion-element links-of-blogroll-block"><div class="links-of-blogroll-title"><i class="fa fa-fw fa-link"></i> 友情链接</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="https://cloudhao.top/#/search/%E5%9F%9F%E5%90%8D" title="陈昀昊的小窝" target="_blank">陈昀昊的小窝</a></li><li class="links-of-blogroll-item"><a href="http://www.shezhiwei.top/" title="佘智伟的博客" target="_blank">佘智伟的博客</a></li><li class="links-of-blogroll-item"><a href="https://blog.csdn.net/qq_43185206" title="阿呆的小鸡仔" target="_blank">阿呆的小鸡仔</a></li></ul></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">&copy; <span itemprop="copyrightYear">2021</span> <span class="with-love"><i class="fa fa-send"></i> </span><span class="author" itemprop="copyrightHolder">杨雨翔</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-area-chart"></i> </span><span class="post-meta-item-text">站点总字数&#58;</span> <span title="站点总字数">61.9k</span></div><div class="busuanzi-count"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span class="site-uv">本站访问数 <i class="fa fa-user"></i> <span class="busuanzi-value" id="busuanzi_value_site_uv"></span> 人次 </span><span class="site-pv">本站总访问量 <i class="fa fa-eye"></i> <span class="busuanzi-value" id="busuanzi_value_site_pv"></span> 次</span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i> <span id="scrollpercent"><span>0</span>%</span></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/MyBlog/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/MyBlog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/MyBlog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/MyBlog/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/MyBlog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/MyBlog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/MyBlog/js/src/utils.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/motion.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/affix.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/schemes/pisces.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/bootstrap.js?v=5.1.4"></script><script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="//unpkg.com/valine/dist/Valine.min.js"></script><script type="text/javascript">var GUEST=["nick","mail","link"],guest="nick";guest=guest.split(",").filter(e=>GUEST.indexOf(e)>-1),new Valine({el:"#comments",verify:!1,notify:!1,appId:"i5Tl5zN4f4LxoJgipanUuaml-gzGzoHsz",appKey:"wqw6uYNCQkeVxBffKebM29NH",placeholder:"说点什么吧...",avatar:"mm",guest_info:guest,pageSize:"10"})</script><script type="text/javascript">var isfetched=!1,isXml=!0,search_path="search.xml";0===search_path.length?search_path="search.xml":/json$/i.test(search_path)&&(isXml=!1);var path="/MyBlog/"+search_path,onPopupClose=function(t){$(".popup").hide(),$("#local-search-input").val(""),$(".search-result-list").remove(),$("#no-result").remove(),$(".local-search-pop-overlay").remove(),$("body").css("overflow","")};function proceedsearch(){$("body").append('<div class="search-popup-overlay local-search-pop-overlay"></div>').css("overflow","hidden"),$(".search-popup-overlay").click(onPopupClose),$(".popup").toggle();var t=$("#local-search-input");t.attr("autocapitalize","none"),t.attr("autocorrect","off"),t.focus()}var searchFunc=function(t,e,o){"use strict";$("body").append('<div class="search-popup-overlay local-search-pop-overlay"><div id="search-loading-icon"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div></div>').css("overflow","hidden"),$("#search-loading-icon").css("margin","20% auto 0 auto").css("text-align","center"),$.ajax({url:t,dataType:isXml?"xml":"json",async:!0,success:function(t){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var n=isXml?$("entry",t).map((function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}})).get():t,r=document.getElementById(e),s=document.getElementById(o),a=function(){var t=r.value.trim().toLowerCase(),e=t.split(/[\s\-]+/);e.length>1&&e.push(t);var o=[];if(t.length>0&&n.forEach((function(n){var r=!1,s=0,a=0,i=n.title.trim(),c=i.toLowerCase(),l=n.content.trim().replace(/<[^>]+>/g,""),h=l.toLowerCase(),p=decodeURIComponent(n.url),u=[],f=[];if(""!=i&&(e.forEach((function(t){function e(t,e,o){var n=t.length;if(0===n)return[];var r=0,s=[],a=[];for(o||(e=e.toLowerCase(),t=t.toLowerCase());(s=e.indexOf(t,r))>-1;)a.push({position:s,word:t}),r=s+n;return a}u=u.concat(e(t,c,!1)),f=f.concat(e(t,h,!1))})),(u.length>0||f.length>0)&&(r=!0,s=u.length+f.length)),r){function d(e,o,n,r){for(var s=r[r.length-1],i=s.position,c=s.word,l=[],h=0;i+c.length<=n&&0!=r.length;){c===t&&h++,l.push({position:i,length:c.length});var p=i+c.length;for(r.pop();0!=r.length&&(i=(s=r[r.length-1]).position,c=s.word,p>i);)r.pop()}return a+=h,{hits:l,start:o,end:n,searchTextCount:h}}[u,f].forEach((function(t){t.sort((function(t,e){return e.position!==t.position?e.position-t.position:t.word.length-e.word.length}))}));var g=[];0!=u.length&&g.push(d(0,0,i.length,u));for(var v=[];0!=f.length;){var $=f[f.length-1],C=$.position,m=$.word,x=C-20,w=C+80;x<0&&(x=0),w<C+m.length&&(w=C+m.length),w>l.length&&(w=l.length),v.push(d(0,x,w,f))}v.sort((function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hits.length!==e.hits.length?e.hits.length-t.hits.length:t.start-e.start}));var y=parseInt("1");function T(t,e){var o="",n=e.start;return e.hits.forEach((function(e){o+=t.substring(n,e.position);var r=e.position+e.length;o+='<b class="search-keyword">'+t.substring(e.position,r)+"</b>",n=r})),o+=t.substring(n,e.end)}y>=0&&(v=v.slice(0,y));var b="";0!=g.length?b+="<li><a href='"+p+"' class='search-result-title'>"+T(i,g[0])+"</a>":b+="<li><a href='"+p+"' class='search-result-title'>"+i+"</a>",v.forEach((function(t){b+="<a href='"+p+'\'><p class="search-result">'+T(l,t)+"...</p></a>"})),b+="</li>",o.push({item:b,searchTextCount:a,hitCount:s,id:o.length})}})),1===e.length&&""===e[0])s.innerHTML='<div id="no-result"><i class="fa fa-search fa-5x" /></div>';else if(0===o.length)s.innerHTML='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>';else{o.sort((function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hitCount!==e.hitCount?e.hitCount-t.hitCount:e.id-t.id}));var a='<ul class="search-result-list">';o.forEach((function(t){a+=t.item})),a+="</ul>",s.innerHTML=a}};r.addEventListener("input",a),$(".local-search-pop-overlay").remove(),$("body").css("overflow",""),proceedsearch()}})};$(".popup-trigger").click((function(t){t.stopPropagation(),!1===isfetched?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()})),$(".popup-btn-close").click(onPopupClose),$(".popup").click((function(t){t.stopPropagation()})),$(document).on("keyup",(function(t){27===t.which&&$(".search-popup").is(":visible")&&onPopupClose()}))</script><script src="/MyBlog/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"model":{"jsonPath":"/MyBlog/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":false},"log":false});</script></body></html>